<template>
  <div>
    <div class="post-title">
      <h1 class="post-title__text">己</h1>
      <!-- <PostMeta :post="$page.post" /> -->
    </div>

    <div class="post content-box">
      <div class="post__content">
        <div class="md-content">
          <h3 style="margin-top: 0" id="关于这个站长的一些情报">
            <a href="#关于这个站长的一些情报"></a>关于这个站长的一些情报
          </h3>
          <p>
            <span>坐标</span>合肥 / 哈尔滨 <br />
            <span>爱好</span>吃 / 动漫 / 科幻 / 博客写作 / 代码
            <br />
            <span>入门</span>C Language / JavaScript / PHP <br />
            <span>想学</span>Cpp / Python / Vue.js / React.js <br />
            <span>习惯</span>VS Code / 4 spaces / Windows / Linux <br />
            <span>人格</span>ISFJ-A Defender 守卫者 / 实用主义属性
            平等・人权・社会主义 / 前网络话痨
          </p>
          <p>
            我在以下平台出没，欢迎通过下面方式联系我。直接留言亦可，交友不必如此复杂。
          </p>
          <table>
            <thead>
              <tr>
                <th align="center">Key</th>
                <th align="center">Value</th>
                <th align="center">Key</th>
                <th align="center">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td align="center"><strong>Email</strong></td>
                <td align="left">
                  <a href="mailto:monsterxcn@gmail.com" target="_blank"
                    >monsterxcn AT gmail.com</a
                  >
                </td>
                <td align="center"><strong>Telegram</strong></td>
                <td align="left">
                  <a href="https://t.me/monsterxcn" target="_blank"
                    >@monsterxcn</a
                  >
                </td>
              </tr>
              <tr>
                <td align="center"><strong>QQ</strong></td>
                <td align="left">
                  <a
                    href="https://wpa.qq.com/msgrd?v=3&uin=38877256&site=qq&menu=yes"
                    target="_blank"
                    >38877256</a
                  >
                </td>
                <td align="center">WeChat</td>
                <td align="left">@mocurio</td>
              </tr>
              <tr>
                <td align="center">Twitter</td>
                <td align="left">
                  <a href="https://twitter.com/monsterxcn" target="_blank"
                    >@monsterxcn</a
                  >
                </td>
                <td align="center">Steam</td>
                <td align="left">
                  <a
                    href="https://steamcommunity.com/id/monsterxcn"
                    target="_blank"
                    >@呆一斯 ki dæ 哟</a
                  >
                </td>
              </tr>
              <tr>
                <td align="center">Bilibili</td>
                <td align="left">
                  <a href="https://space.bilibili.com/358575230" target="_blank"
                    >@初夏阳光12138</a
                  >
                </td>
                <td align="center">WeiBo</td>
                <td align="left">
                  <a href="https://weibo.com/u/3978619198" target="_blank"
                    >@小怪兽MonsterX</a
                  >
                </td>
              </tr>
              <tr>
                <td align="center">Genshin<sup>Offical</sup></td>
                <td align="left">134266985（你干嘛呢）</td>
                <td align="center">Arknights<sup>Bili</sup></td>
                <td align="left">Dr. 苏哒哒#6074</td>
              </tr>
            </tbody>
          </table>

          <h3 id="关于这个博客的一些情报">
            <a href="#关于这个博客的一些情报"></a>关于这个博客的一些情报
          </h3>
          <p>
            <code class="language-text"
              >WordPress -> Typecho -> Hexo -> Gridsome</code
            ><br />
            <code class="language-text">2014 -> 2017 -> 2019 -> 2020</code
            ><br />
            <code class="language-text"
              >moc­coo.cn -> mocurio.com -> monsterx.cn</code
            >
          </p>
          <p>
            当前由
            <a href="http://gridsome.org/" target="_blank">Gridsome</a>
            驱动，使用
            <a
              href="https://github.com/gridsome/gridsome-starter-blog"
              target="_blank"
              >@gridsome/gridsome-starter-blog</a
            >
            主题，参考
            <a href="https://blog.spencerwoo.com/" target="_blank"
              >@Spencer's Blog</a
            >
            和
            <a href="https://blog.jalenchuh.cn/" target="_blank"
              >@Jalen's Blog</a
            >
            进行了一丁点修改，代码开源于 GitHub
            <a href="https://github.com/monsterxcn/myBlog" target="_blank"
              >@monsterxcn/myBlog</a
            >
          </p>
          <p>
            由于站长怠惰，还有一些早期博文存留在
            <a href="https://monsterx.cn/index.php" target="_blank">旧版站点</a>
            未转移，如果有闲工夫可以翻翻。
          </p>
          <div>
            <h4>History</h4>
            <p><span>2018 Oct.01</span>New Start (Typecho + Material)</p>
            <p><span>2018 Oct.17</span>工信部备案</p>
            <p><span>2018 Nov.03</span>公安机关备案</p>
            <p><span>2018 Nov.10</span>TLS v1.0 No, TLS v1.3 Yes</p>
            <p><span>2019 Apr.29</span>图片全部迁移至服务器</p>
            <p><span>2019 May.22</span>AMP & MIP 支持</p>
            <p>
              <span>2019 May.14</span>Material v3.3.1，色调 #757575 更新为
              #0099FF
            </p>
            <p><span>2019 Aug.20</span>Material No, VOID Yes</p>
            <p><span>2019 Aug.25</span>静态资源迁移至阿里云 OSS</p>
            <p><span>2020 Mar.17</span>TLS v1.1 No, HTTP/3 QUIC Yes</p>
            <p>
              <span>2020 Mar.18</span>域名解析中国境外境内分离，Cloudflare and
              Aliyun CDN
            </p>
            <p><span>2020 Mar.21</span>JPG PNG No, Webp Yes</p>
            <p><span>2020 May.21</span>VOID No, myVOID Yes</p>
            <p><span>2020 Aug.15</span>Typecho No, Gridsome Yes</p>
            <p><span>2020 Aug.19</span>规范 Markdown 源文件书写格式</p>
            <p><span>2020 Sep.30</span>GitHub 仓库开源</p>
            <p><span>Keep moving...</span></p>
          </div>

          <p></p>
          <br />
          <div class="admonition admonition-important">
            <div class="admonition-heading">
              <h5>
                <div class="admonition-icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="14"
                    height="16"
                    viewBox="0 0 14 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
                    ></path>
                  </svg>
                </div>
                版权
              </h5>
            </div>
            <div class="admonition-content">
              若无特殊声明，作品默认基于
              <a
                href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
                target="_blank"
                >CC BY-NC-SA 4.0</a
              >
              协议许可，请注意遵守协议规定。 <br />
              作品引用图片小部分来自网络，可能存在版权问题。如发现相关争议请及时联系站长处理！
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="artalk-cards">
      <details class="admonition admonition-warning">
        <summary>
          <div class="admonition-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="16"
              viewBox="0 0 12 16"
            >
              <path
                fill-rule="evenodd"
                d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"
              ></path>
            </svg>
          </div>
          Comment on Monstx's Blog<!-- 评论区施工中... -->
        </summary>
        <p>
          评论发表后 UA 信息、IP
          地址会被记录，分别用于评论区展示和垃圾评论拦截。<br />
          无特殊原因评论不会被删除，你应该懂得如何发表适当的言论并对其负责。
        </p>
      </details>
      <div id="LetsArtalk"></div>
    </div>

    <transition name="fade">
      <div
        id="back-to-top"
        v-scroll-to="{ el: '#app' }"
        v-if="scrolledDist > 400"
      >
        <font-awesome id="back-to-top-icon" :icon="['fas', 'arrow-up']" />
      </div>
    </transition>

    <Author class="post-author" />
  </div>
</template>

<script>
import 'artalk/dist/Artalk.css'
import Author from '~/components/Author'
export default {
  components: {
    Author,
  },
  metaInfo() {
    return {
      title: '己',
      meta: [
        { key: 'og:type', property: 'og:type', content: 'website' },
        {
          key: 'og:title',
          property: 'og:title',
          content: "己 - Monstx's Blog",
        },
        {
          key: 'og:description',
          property: 'og:description',
          content: '关于这个站点的一些情报',
        },
        {
          key: 'og:url',
          property: 'og:url',
          content: 'https://blog.monsterx.cn/about',
        },
        {
          key: 'og:image',
          property: 'og:image',
          content: 'https://blog.monsterx.cn/screen.png',
        },
        { key: 'twitter:card', name: 'twitter:card', content: 'summary' },
        { key: 'twitter:site', name: 'twitter:site', content: '@monsterxcn' },
        {
          key: 'twitter:creator',
          name: 'twitter:creator',
          content: '@monsterxcn',
        },
        {
          key: 'twitter:title',
          name: 'twitter:title',
          content: "己 - Monstx's Blog",
        },
        {
          key: 'twitter:description',
          name: 'twitter:description',
          content: '关于这个站点的一些情报',
        },
        {
          key: 'twitter:image',
          name: 'twitter:image',
          content: 'https://blog.monsterx.cn/screen.png',
        },
        {
          key: 'description',
          name: 'description',
          itemprop: 'description',
          content: '关于这个站点的一些情报',
        },
        { key: 'name', itemprop: 'name', content: "己 - Monstx's Blog" },
        {
          key: 'image',
          itemprop: 'image',
          content: 'https://blog.monsterx.cn/screen.png',
        },
      ],
      script: [
        {
          type: 'application/ld+json',
          json: {
            '@context': 'http://schema.org',
            '@type': 'AboutPage',
            description: '关于这个站点的一些情报',
            datePublished: '2020-08-15',
            author: { name: 'monsterxcn' },
            headline: "己 - Monstx's Blog",
            image: 'https://blog.monsterx.cn/screen.png',
          },
        },
      ],
    }
  },
  data() {
    return {
      scrolledDist: 0,
    }
  },
  methods: {
    handleScroll() {
      if (process.isClient) {
        this.scrolledDist = window.scrollY
      }
    },
  },
  created() {
    if (process.isClient) {
      window.addEventListener('scroll', this.handleScroll)
    }
  },
  destroyed() {
    if (process.isClient) {
      window.removeEventListener('scroll', this.handleScroll)
    }
  },
  mounted() {
    // Initialize post comment by Artalk
    if (process.env.NODE_ENV === 'production') {
      let Artalk = require('artalk')
      var artalk = new Artalk({
        el: '#LetsArtalk',
        placeholder: '说点什么 (づ￣ 3￣)づ',
        defaultAvatar: 'mp',
        maxNest: 2,
        pageKey: 'https://blog.monsterx.cn/about/',
        serverUrl: 'https://lab.monsterx.cn/ArtalkServer',
        readMore: {
          pageSize: 10,
          autoLoad: false,
        },
      })
    }
  },
}
</script>

<style lang="scss">
.artalk-cards {
  background: var(--at-bg-main);
  border-radius: var(--radius);
  max-width: var(--content-width);
  margin: 20px auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  details {
    margin: 0 auto;
    text-align: center;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    font-weight: 600;
    outline: none;
    summary {
      list-style: none;
      margin: 4px auto !important;
      color: var(--cb-admonition-icon-color) !important;
      margin: 2.75rem 0 1rem;
      font-family: var(--title-font-family);
      line-height: 1.5;
      outline: none;
    }
    summary::-webkit-details-marker {
      display: none;
    }
    p {
      color: var(--at-font-color);
      margin-bottom: 0;
    }
  }
  #LetsArtalk {
    padding: 20px;
  }
  @media screen and (max-width: 767.5px) {
    details > p {
      text-align: left;
    }
    #LetsArtalk {
      padding: 0;
    }
  }
}
.post-title {
  padding: var(--space) 0 var(--space);
  text-align: center;
  &__publish-icon {
    vertical-align: top;
    background-color: #f7b955;
    display: inline-block;
    font-size: 14px;
    height: 18px;
    line-height: 18px;
    border-radius: 3px;
    padding: 0 6px;
    color: #fff;
  }
}
.post-meta {
  font-family: var(--base-font-family);
}
.post {
  p span {
    font-size: 0.85rem;
    font-family: var(--monospace-font-family);
    &::after {
      content: ' ';
    }
  }
  &__header {
    width: calc(100% + var(--space) * 2);
    margin-left: calc(var(--space) * -1);
    margin-top: calc(var(--space) * -1);
    margin-bottom: calc(var(--space) / 2);
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    img {
      width: 100%;
    }
    &:empty {
      display: none;
    }
  }
  &__content {
    h2:first-child {
      margin-top: 0;
    }
    // p:first-of-type {
    //   // font-size: 1.2em;
    //   color: var(--title-color);
    // }
    p {
      line-height: 1.8;
    }
    img {
      // width: calc(100% + var(--space) * 2);
      // margin-left: calc(var(--space) * -1);
      display: block;
      max-width: 100%;
      margin: 0 auto;
    }
  }
  &__navigation {
    border-top: 1px solid var(--border-color);
    margin-top: calc(var(--space) / 2);
    padding: calc(var(--space) / 2) 0 0 0;
    overflow: auto;
    .navlink {
      border: none;
      text-decoration: none;
      &:first-of-type {
        margin-bottom: calc(var(--space) / 4);
      }
    }
  }
}
.footnotes {
  p {
    display: inline;
  }
  hr {
    padding: calc(var(--space) / 2) 0 0 0;
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 0;
  }
  .footnote-backref {
    display: inline;
  }
}
.post-comments {
  font-family: var(--base-font-family);
  padding: calc(var(--space) / 2);
  max-width: var(--content-width);
  margin: 0 auto;
}
.post-author {
  margin-top: 100px;
}
#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 100;
  cursor: pointer;
}
#back-to-top-icon {
  font-size: 1.1em;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
